<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无消息~"
      :empty-view-img-style="imgStyle"
    >
      <view solt="top">
        <u-navbar title="系统消息" height="50" title-size="36"></u-navbar>
      </view>
      <view class="" style="padding: 20rpx">
        <view class="message-box" v-for="(item, index) in itemList" :key="index">
          <view class="msg-title dis-flex flex-y-between flex-y-center">
            <view class="">
              {{ item.templateName ? item.templateName : '系统通知' }}
            </view>
            <view class="datetime">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}</view>
          </view>
          <view class="msg-content">
            {{ item.templateContent }}
          </view>
          <view class="msg-more" v-if="item.templateParams">
            <text v-if="item.templateParams.deliveryName"
              >物流公司 {{ item.templateParams.deliveryName }}</text
            >
            <text v-if="item.templateParams.logisticsNo"
              >快递单号 {{ item.templateParams.logisticsNo }}</text
            >
            <text v-if="item.templateParams.spuName"
              >商品名称 {{ item.templateParams.spuName }}</text
            >
            <text v-if="item.templateParams.expireTime"
              >过期时间 {{ item.templateParams.expireTime }}</text
            >
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      itemList: []
    }
  },
  onShow() {
    this.queryList()
  },
  onHide() {
    // self.$u.get('/app-api/system/notify-message/update-all-read',{}).then(res => {
    // 	//标记已读
    // })
  },
  methods: {
    queryList(page, pageSize) {
      let self = this
      self.$u
        .get('/app-api/system/notify-message/my-page', {
          limit: pageSize,
          page: page,
          status: status
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
        .catch((res) => {})
    },
    initData(page, pageSize) {
      //this.onOrderLoad(this.current, this.itemList, false);
    }
  }
}
</script>

<style lang="scss">
page {
  background: #f7f7f7;
  padding: 20rpx;
}
.message-box {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.msg-title {
  /* font-size: 33rpx; */
  .datetime {
    font-size: 24rpx;
    color: #999999;
  }
}
.msg-content {
  font-weight: 600;
  font-size: 32rpx;
  margin: 15rpx 0;
}
.msg-title p {
  font-size: 25rpx;
}

.msg-more {
  font-size: 24rpx;
  color: #999999;
  text {
    margin-right: 20rpx;
  }
}
</style>
